<template>
  <div>
    <table>
      <tr v-for="(r,index) in allData" :key="`tr-${index}`" style="height: 22px;line-height: 22px;">
        <!--<td class="seat" v-for="c in col"></td>-->
        <td
          v-for="(c,rIndex) in r"
          :key="`c-${rIndex}`"
          :class="[
            (!isSeat || (isSeat && c.isTing)) && 'seat',
            (isSeat && !c.isTing) && 'null-td',
            ((c.isTing && !isSeat) || (c.isChecked && isSeat)) && 'checked',
            (isSeat && c.isLocked) && 'locked',
            (c.col<6 || c.col>col -5) && 'null-td']"
          @click="checkTingClicked(c)">
          <span v-if="c.col == 1">{{ index+1 }}</span>
          <span v-else-if="c.col == col">{{ index+1 }}</span>
          <span v-else-if="(c.number && c.isChecked) || (c.number && c.isTing)">{{ c.number }}</span>

        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import Vue from 'vue'
import ElButton from '../../../node_modules/element-ui/packages/button/src/button.vue'

export default {
  name: 'Seats',
  components: { ElButton },
  props: {
    tingData: {
      type: [Array, String],
      // eslint-disable-next-line vue/require-valid-default-prop
      default: function() {
        return []
      }
    },
    lockData: {
      type: [Array, String],
      default: ''
    },
    isSeat: {
      type: Boolean,
      default: false
    },
    sortType: {
      type: String,
      default: 'leftToRight'
    },
    isAction: {
      type: Boolean,
      default: true
    }

  },
  data() {
    return {
      row: 15,
      col: 40,
      allData: []
    }
  },
  watch: {
    sortType(val) {
      this.refreshTing()
    },
    tingData(val) {
      if (!val) {
        return
      }

      this.initData()
      this.initTingData()
    },
    lockData(val) {
      if (!val) {
        return
      }

      this.initData()
      this.initLockData()
    }
  },
  created() {
    console.info(this.tingData)
    this.initData()
    this.initTingData()
    this.initLockData()
  },
  methods: {

    // 初始化数据
    initData() {
      var rowArr = []
      for (var r = 1; r <= this.row; r++) {
        var colArr = []
        for (var c = 1; c <= this.col; c++) {
          const obj = {
            row: r,
            col: c,
            isTing: false,
            isChecked: false,
            isLocked: false
          }
          colArr.push(obj)
        }
        rowArr.push(colArr)
      }
      this.allData = rowArr
    },

    initTingData() {
      let tingData = null
      const val = this.tingData
      if (val) {
        if (typeof val === 'string') {
          tingData = JSON.parse(val)
        } else {
          tingData = val
        }

        for (let i = 0; i < this.allData.length; i++) {
          const allCols = this.allData[i]
          for (let z = 0; z < allCols.length; z++) {
            for (let j = 0; j < tingData.length; j++) {
              const tingObj = tingData[j]
              if (i + 1 === tingObj.row && z + 1 === tingObj.col) {
                Vue.set(allCols[z], 'isTing', true)
                Vue.set(allCols[z], 'number', tingObj.number)
              }
            }
          }
        }
      }
    },

    initLockData() {
      let lockWatchData = null

      if (this.lockData === null || this.lockData === undefined || this.lockData.length === 0) {
        return
      }

      if (this.lockData) {
        if (typeof this.lockData === 'string') {
          lockWatchData = JSON.stringify(this.lockData)
        } else {
          lockWatchData = this.lockData
        }
      }
      for (let i = 0; i < this.allData.length; i++) {
        const allCols = this.allData[i]
        for (let z = 0; z < allCols.length; z++) {
          for (let j = 0; j < lockWatchData.length; j++) {
            const lockObj = lockWatchData[j]
            if (i + 1 === lockObj.row && z + 1 === lockObj.col) {
              Vue.set(allCols[z], 'isLocked', true)
            }
          }
        }
      }
    },

    /**
     * 初始化影厅座位
     * 选择座位
     * @param item
     */
    checkTingClicked(item) {
      if (item.col < 6 || item.col > this.col - 5) {
        return
      }

      if (!this.isAction) {
        return
      }

      if (this.isSeat) {
        if (!item.isTing) {
          return
        }

        if (item.isLocked) {
          return
        }

        Vue.set(item, 'isChecked', !item.isChecked)
        this.saveTingDataClicked()
        return
      }

      Vue.set(item, 'isTing', !item.isTing)
      Vue.set(item, 'number', null)

      const arr = this.allData[item.row - 1]
      let total = 0
      for (const index in arr) {
        const col = arr[index]
        if (col.isTing) {
          total++
        }
      }

      let num = 1
      if (this.sortType === 'rightToLeft') {
        num = total
      }

      for (const index in arr) {
        const col = arr[index]
        if (col.isTing) {
          Vue.set(col, 'number', num)
          if (this.sortType === 'rightToLeft') {
            num--
          } else {
            num++
          }
        }
      }

      this.saveTingDataClicked()
    },

    /**
     * 从新刷新选择的位置
     */
    refreshTing() {
      for (let i = 0; i < this.allData.length; i++) {
        const arr = this.allData[i]
        let total = 0
        for (const index in arr) {
          const col = arr[index]
          if (col.isTing) {
            total++
          }
        }
        if (total > 0) {
          let num = 1
          if (this.sortType === 'rightToLeft') {
            num = total
          }

          for (const index in arr) {
            const col = arr[index]
            if (col.isTing) {
              Vue.set(col, 'number', num)
              if (this.sortType === 'rightToLeft') {
                num--
              } else {
                num++
              }
            }
          }
        }
      }

      this.saveTingDataClicked()
    },

    /**
     * 设置影厅
     * 保存选中的座位
     */
    saveTingDataClicked() {
      var tingArr = []
      var lockArr = []
      for (const rIndex in this.allData) {
        const row = this.allData[rIndex]
        for (const cIndex in row) {
          const col = row[cIndex]
          if (this.isSeat && col.isChecked) {
            lockArr.push(col)
          } else if (!this.isSeat && col.isTing) {
            tingArr.push(col)
          }
        }
      }
      if (this.isSeat) {
        this.$emit('tingCheckedCall', lockArr)
      } else if (!this.isSeat) {
        this.$emit('tingCheckedCall', tingArr)
      }
    }

    /**
     * 保存选中的座位
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

    .seat{
      border:1px solid #d4d4d4;
      width:20px;
      height:20px;
      text-align: center;
      cursor: pointer;
    }

    .seat>span{
      font-size: 12px;
      color: #666;
    }
    .null-td{
      border:0px;
      width:20px;
      height:20px;
    }

    .null-td>span{
      font-size: 12px;
    }

    .checked{
      background-color: #42b983;
    }

  .checked>span{
    color: #fff;
    font-size: 12px;
  }

  .locked{
    background-color: #f7003b;
  }

    .locked>span{
      color: #fff;
      font-size: 12px;
    }

</style>
